<!-- eslint-disable no-unreachable -->
<template>
  <div class="title">登入</div>
  <div id="loginPage">
    <form class="loginBox" @submit.prevent="loginAccount">
      <div class="loginComponents">
        <label for="username" class="loginlabel">员工工号</label><br />
        <input
          id="username"
          class="input-br20-white"
          type="text"
          name="username"
          required
          autofocus
          autocomplete="on"
          v-model="username"
        />
      </div>

      <div class="loginComponents">
        <label for="password" class="loginlabel">密码</label><br />
        <input
          id="userpw"
          class="input-br20-white"
          type="password"
          name="password"
          required
          autofocus
          autocomplete="on"
          v-model="password"
        />
        <br /><a class="forgotpw" @click="forgotPw">忘记密码</a>
      </div>

      <div class="loginbtndiv">
        <q-btn
          :loading="loading"
          type="submit"
          label="登入"
          class="loginBtn"
          color="deep-purple-9"
        />
      </div>
    </form>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";
import { useUserStore } from "src/stores/modules/userStore";

export default defineComponent({
  name: "LoginPage",

  setup() {
    const userStore = useUserStore();
    const $router = useRouter();
    const $q = useQuasar();

    const username = ref("");
    const password = ref("");

    const loading = ref(false);

    // init
    userStore.init();

    const loginAccount = async () => {
      loading.value = true;
      const res = await userStore.login(username.value, password.value);
      console.log("login res: ", res);
      if (res) {
        $router.push("/chooseRole");
        loading.value = false;
      } else {
        $q.notify({
          type: "negative",
          textColor: "white",
          message: "登入失败 !",
          iconSize: "2rem",
          timeout: 2000,
          position: "center",
        });
        loading.value = false;
      }
    };

    // Function: Route to Forgot PW Page
    const forgotPw = () => {
      $router.push("/forgotPw");
    };

    return {
      username,
      password,
      loading,
      loginAccount,
      forgotPw,
    };
  },
});
</script>

<style lang="scss"></style>
